<template>
  <div style="background:#f1f1f1;min-height:100vh" class="container">
    <mt-header title="我的账户">
      <router-link :to="{name:'mine'}" slot="left">
        <mt-button icon="back"></mt-button>
      </router-link>
    </mt-header>
    <div class="a_content">
      <p>余额</p>
      <p><b style="font-size:0.4rem">￥</b>118</p>
    </div>
    <p class="a_p">提现<i class="iconfont icon-you"></i></p>
    <p class="a_p" @click.stop="showtc">资金明细<i class="iconfont icon-you"></i></p>
    <p class="a_p" @click.stop="showbzj">保证金<i class="iconfont icon-you"></i></p>
    <transition name="slide-fade">
      <baozhengjin v-show="isbaozhengjin" :isshowbzj="this.showbzj"></baozhengjin>
    </transition>
    <transition name="slide-fade">
      <ticheng v-show="isticheng" :isshowtc="this.showtc"></ticheng>
    </transition>
  </div>
</template>

<script>
import baozhengjin from '~/components/base/baozhengjin.vue';
import ticheng from '~/components/base/ticheng.vue';

export default {
  data() {
    return {
      isbaozhengjin: false,
      isticheng: false,
    };
  },
  components: {
    baozhengjin,
    ticheng,
  },
  methods: {
    showbzj() {
      this.isbaozhengjin = !this.isbaozhengjin;
    },
    showtc() {
      this.isticheng = !this.isticheng;
    },
  },
};
</script>

<style lang="stylus">
.mint-header-button
  flex 0
.slide-fade-enter-active {
  transition: all .3s ease;
}
.slide-fade-leave-active {
  transition: all .3s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}
.slide-fade-enter, .slide-fade-leave-to
/* .slide-fade-leave-active for below version 2.1.8 */ {
  transform: translateX(10px);
  opacity: 0;
}
.container
  .a_content
    margin-top 0.3rem
    background #fff
    height 2rem
    p
      text-align center
      &:first-child
        font-size 0.3rem
        font-weight bold
        height 1rem
        line-height 1rem
      &:last-child
        font-size 0.6rem
        color #f60
  .a_p
    padding-left 0.1rem
    height 0.8rem
    line-height 0.8rem
    background #fff
    margin-top 0.3rem
    i
      float right
      padding-right 0.2rem
</style>

